<template>
  <div class="workList">
    <el-table :data="tableData" v-loading="loading" border style="width: 100%">
      <el-table-column prop="id" label="用户ID" align="center">
      </el-table-column>
      <el-table-column prop="userId" label="所属班级" align="center">
      </el-table-column>
      <el-table-column prop="title" label="作业名称" align="center">
      </el-table-column>
      <el-table-column prop="completed_text" label="完成情况" align="center">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { workList } from "@/api/index";
export default {
  name: "WorkList",
  data() {
    return {
      tableData: [],
      total: 0,
      pageSize: 50,
      currentPage: 1,
      loading: true,
    };
  },
  created() {
    this.getWorkList({ page: this.currentPage, size: this.pageSize })
  },
  methods: {
    //处理分页的两个方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1; //改变每页显示条数后，默认当前在第1页
      this.getWorkList({ page: this.currentPage, size: val });
      console.log("1111");
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getWorkList({ page: val, size: this.pageSize });
      console.log("2222");
    },
    getWorkList(params) {
      workList(params)
        .then((res) => {
          if (res.data.status === 200) {
            console.log("==>");
            console.log(res);
            this.total = res.data.total;
            this.tableData = res.data.data;
            this.tableData.map((item) => {
              item.completed
                ? (item.completed_text = "是")
                : (item.completed_text = "否");
            });
            this.loading = false;
          }
        })
        .catch((err) => {
          throw err;
        });
    },
  },
  // computed: {
  //   //分页： 1:1-10 2:11-20   slice((当前页数-1)*每页条数,当前页数*每页条数)
  //   compData() {
  //     return this.tableData.slice(
  //       (this.currentPage - 1) * this.pageSize,
  //       this.currentPage * this.pageSize
  //     );
  //   },
  // },
};
</script>

<style lang = "less">
.workList {
  .el-pagination {
    text-align: left;
    margin-top: 20px;
  }
}
</style>